<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/images/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/style.scss">
    <title>Hello 2024</title>
  </head>
  <body>

    <!-- canvas content -->
    <div class="canvas-container">
      <canvas></canvas>
    </div>

    <!-- action content -->
    <div class="actions">
      <button class="go">Go!</button>
    </div>

    <!-- loading content -->
    <div class="loading">
      <span class="percent">0</span>
      <span class="unit">%</span>
    </div>
    
    <div class="bottom-bar">
      <button class="show-info">?</button>
    </div>

    <!-- Info dialog content -->
    <div class="info">
      <img class="logo" src="/images/cover.webp" alt="">
      
      <div class="title">
        Hello 2024
      </div>
      <div class="author">
        Created By Jesse Luo In Amoy 
      </div>
      <div class="guid">
        <p>W: forward</p>
        <p>S: backward</p>
        <p>A: rotate left</p>  
        <p>D: rotate right</p>  
      </div>

      <div class="sub-title">
        Repository
      </div>
      <a href="https://github.com/luosijie/loong-year-2024" target="_blank">
        https://github.com/luosijie/loong-year-2024
      </a>

      
      <!-- <a href="https://github.com/luosijie/playground">https://github.com/luosijie/playground</a> -->
      <button class="close-info">
        x
      </button>
    </div>
	</div>
	</div>

    <script type="module" src="/src/main.ts"></script>
  </body>
</html>
